<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portlets - eKoders Responsive Admin Theme</title>
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
	<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
	
	<!-- PAGE LEVEL MODULES STYLES -->
	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<link rel="stylesheet" type="text/css" href="assets/css/plugins/gritter/jquery.gritter.css" />	

    <!-- Tc core CSS -->
	<link id="qstyle" rel="stylesheet" href="assets/css/themes/style.css">
	
	
    <!-- Add custom CSS here -->

	<!-- End custom CSS here -->
	
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
	
  </head>

  <body>
	<div id="wrapper">
		<div id="main-container">		
			<!-- BEGIN TOP NAVIGATION -->
				<nav class="navbar-top" role="navigation">
					<!-- BEGIN BRAND HEADING -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".top-collapse">
							<i class="fa fa-bars"></i>
						</button>
						<div class="navbar-brand">
							<a href="index.html">
								<img src="assets/images/logo.png" alt="logo" class="img-responsive">
							</a>
						</div>
					</div>
					<!-- END BRAND HEADING -->
					<div class="nav-top">
						<!-- BEGIN RIGHT SIDE DROPDOWN BUTTONS -->
							<ul class="nav navbar-right">
								<li class="dropdown">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
										<i class="fa fa-bars"></i>
									</button>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-envelope"></i> <span class="badge up badge-primary">2</span></a>
											<ul class="dropdown-menu dropdown-scroll dropdown-messages">
												<li class="dropdown-header">
													<i class="fa fa-envelope"></i> 2 New Messages
												</li>
												<li id="messageScroll">
													<ul class="list-unstyled">
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-1.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>John Smith</strong>: Hi again! I wanted to let you know that the order...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 5 minutes ago
																		</p>
																	</div>
																</div>
															</a>
														</li>
														<li>
															<a href="#">
																<div class="row">
																	<div class="col-xs-2">
																		<img class="img-circle" src="assets/images/user-profile-2.jpg" alt="">
																	</div>
																	<div class="col-xs-10">
																		<p>
																			<strong>Roddy Austin</strong>: Thanks for the info, if you need anything...
																		</p>
																		<p class="small">
																			<i class="fa fa-clock-o"></i> 3:39 PM
																		</p>
																	</div>
																</div>
															</a>
														</li>
													</ul>
												</li>
												<li class="dropdown-footer">
													<a href="#">
														Read All Messages
													</a>
												</li>
											</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell"></i> <span class="badge up badge-success">3</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-alerts">
											<li class="dropdown-header">
												<i class="fa fa-bell"></i> 3 New Alerts
											</li>
											<li id="alertScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<div class="alert-icon bg-info pull-left">
																<i class="fa fa-download"></i>
															</div>
																Downloads <span class="badge badge-info pull-right">16</span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-success pull-left">
																<i class="fa fa-cloud-upload"></i>
															</div>
																Server #8 Rebooted <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
													<li>
														<a href="#">
															<div class="alert-icon bg-danger pull-left">
																<i class="fa fa-bolt"></i>
															</div>
																Server #8 Crashed <span class="small pull-right"><strong><em>12 hours ago</em></strong></span>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Alerts
												</a>
											</li>
										</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-tasks"></i> <span class="badge up badge-info">7</span>
									</a>
										<ul class="dropdown-menu dropdown-scroll dropdown-tasks">
											<li class="dropdown-header">
												<i class="fa fa-tasks"></i> 10 Pending Tasks
											</li>
											<li id="taskScroll">
												<ul class="list-unstyled">
													<li>
														<a href="#">
															<p>
																Purchase Order #439 <span class="pull-right"><strong>52%</strong></span>
															</p>
															<div class="progress progress-striped">
																	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="width: 52%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																March Content Update <span class="pull-right"><strong>14%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Client #42 Data Scrubbing <span class="pull-right"><strong>68%</strong></span>
															</p>
															<div class="progress progress-striped">
																<div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																PHP Upgrade Server #6 <span class="pull-right"><strong>85%</strong></span>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
															</div>
														</a>
													</li>
													<li>
														<a href="#">
															<p>
																Malware Scan <span class="pull-right"><strong>66%</strong></span>
															</p>
															<div class="progress progress-striped active">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;"></div>
															</div>
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown-footer">
												<a href="#">
													View All Tasks
												</a>
											</li>
										</ul>
								</li>
								<!--Speech Icon-->
								<li class="dropdown">
									<a href="#" class="speech-button">
										<i class="fa fa-microphone"></i>
									</a>
								</li>
								<!--Speech Icon-->
								<li class="dropdown user-box">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<img class="img-circle" src="assets/images/user.jpg" alt=""> <span class="user-info">John Smith</span> <b class="caret"></b>
									</a>
										<ul class="dropdown-menu dropdown-user">
											<li>
												<a href="profile.html">
													<i class="fa fa-user"></i> My Profile
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-envelope"></i> My Messages
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-tasks"></i> My Tasks
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-gear"></i> Settings
												</a>
											</li>											
											<li>
												<a href="login.html">
													<i class="fa fa-power-off"></i> Logout
												</a>
											</li>
										</ul>
								</li>
								<!--Search Box-->
								<li class="dropdown nav-search-icon">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<span class="glyphicon glyphicon-search"></span>
									</a>
									<ul class="dropdown-menu dropdown-search">
										<li>
											<div class="search-box">
												<form class="" role="search">
													<input type="text" class="form-control" placeholder="Search" />
												</form>
											</div>
										</li>
									</ul>
								</li>
								<!--Search Box-->
							</ul>
						<!-- END RIGHT SIDE DROPDOWN BUTTONS -->							
						<!-- BEGIN TOP MENU -->
							<div class="collapse navbar-collapse top-collapse">
								<!-- .nav -->
								<ul class="nav navbar-left navbar-nav">
									<li><a href="index.html">Dashboard</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											Components <b class="caret"></b>
										</a>
										<ul class="dropdown-menu">
											<li><a href="elements-ui.html">Elements</a></li>
											<li><a href="button-ui.html">Buttons & Icons</a></li>
											<li><a href="portlet.html">Portlet</a></li>
											<li><a href="jquery-ui.html">jQuery UI</a></li>
										</ul>
									</li>
									<li><a href="front/index.html">FrontEnd <span class="badge badge-primary">New</span></a></li>
								</ul><!-- /.nav -->
							</div>
						<!-- END TOP MENU -->
					</div><!-- /.nav-top -->
				</nav><!-- /.navbar-top -->
				<!-- END TOP NAVIGATION -->

				
				<!-- BEGIN SIDE NAVIGATION -->				
				<nav class="navbar-side" role="navigation">
					<div class="navbar-collapse sidebar-collapse collapse">

						<!-- BEGIN SHORTCUT BUTTONS -->
						<div class="media">							
							<ul class="sidebar-shortcuts">
								<li><a class="btn"><i class="fa fa-user icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-envelope icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-th icon-only"></i></a></li>
								<li><a class="btn"><i class="fa fa-gear icon-only"></i></a></li>
							</ul>	
						</div>
						<!-- END SHORTCUT BUTTONS -->	
							
						<!-- BEGIN FIND MENU ITEM INPUT -->
						<div class="media-search">	
							<input type="text" class="input-menu" id="input-items" placeholder="Find...">
						</div>						
						<!-- END FIND MENU ITEM INPUT -->
						
						<ul id="side" class="nav navbar-nav side-nav">
							<!-- BEGIN SIDE NAV MENU -->							
							<!-- Navigation category -->
							<li>
								<h4>Navigation</h4> 								
							</li>
							<!-- END Navigation category -->
							
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i> Dashboard
								</a>
							</li>
							<!-- BEGIN COMPONENTS DROPDOWN -->
							<li  class="panel open">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#components">
									<i class="fa fa-cogs"></i> Components <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav in" id="components">
										<li>
											<a class="active" href="portlet.html">
												<i class="fa fa-angle-double-right"></i> Portlets
											</a>
										</li>
										<li>
											<a href="elements-ui.html">
												<i class="fa fa-angle-double-right"></i> Elements <span class="label label-sm label-primary">New</span>
											</a>
										</li>
										<li>
											<a href="tabs_accordions-ui.html">
												<i class="fa fa-angle-double-right"></i> Tabs & Accordions
											</a>
										</li>
										<li>
											<a href="button-ui.html">
												<i class="fa fa-angle-double-right"></i> Buttons & Icons
											</a>
										</li>
										<li>
											<a href="jquery-ui.html">
												<i class="fa fa-angle-double-right"></i> JQuery UI
											</a>
										</li>
										<li>
											<a href="nestable-list.html">
												<i class="fa fa-angle-double-right"></i> Nestable Lists
											</a>
										</li>
										<li>
											<a href="calendar.html">
												<i class="fa fa-angle-double-right"></i> Calendar
											</a>
										</li>
										<!-- BEGIN THREE LEVEL MENU -->
										<li>
											<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu">
												<i class="fa fa-angle-double-right"></i> Three Level Menu <span class="fa arrow"></span>
											</a>
												<ul class="collapse nav" id="sub-menu">
													<li>
														<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item <span class="badge badge-primary">3</span></a>
													</li>
													<!-- BEGIN 4th LEVEL MENU -->
													<li>
														<a href="javascript:;" class="accordion-toggle" data-toggle="collapse"  data-target="#sub-menu2">
															<i class="fa fa-angle-double-right"></i> 4rth Level <span class="fa arrow"></span>
														</a>
															<ul class="collapse nav" id="sub-menu2">
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item1 </a>
																</li>
																<li>
																	<a href="#" title="Title"><i class="fa fa-angle-double-right"></i> item2</a>
																</li>
															</ul>
													</li>
													<!-- END 4th LEVEL MENU -->
												</ul>
										</li>
										<!-- ENDTHREE LEVEL MENU -->
									</ul>
							</li>
							<!-- END COMPONENTS DROPDOWN -->							
							<li>
								<a href="tables.html">
									<i class="fa fa-list"></i> Tables<span class="badge badge-primary">New</span> 
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-text-width"></i> Typography 
								</a>
							</li>
							<!-- BEGIN FORMS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#forms">
									<i class="fa fa-edit"></i> Forms <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="forms">
										<li>
											<a href="forms.html">
												<i class="fa fa-angle-double-right"></i> Form Elements 
											</a>
										</li>
										<li>
											<a href="form-tools.html">
												<i class="fa fa-angle-double-right"></i> Form Tools 
											</a>
										</li>										
										<li>
											<a href="form-wizard.html">
												<i class="fa fa-angle-double-right"></i> Wizard & Validation
											</a>
										</li>
									</ul>
							</li>
							<!-- END FORMS DROPDOWN -->

							<!-- BEGIN CHARTS DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#charts">
									<i class="fa fa-bar-chart-o"></i> Charts <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="charts">
										<li>
											<a href="flot.html">
												<i class="fa fa-angle-double-right"></i> Flot Charts 
											</a>
										</li>
										<li>
											<a href="morris.html">
												<i class="fa fa-angle-double-right"></i> Morris Charts 
											</a>
										</li>
									</ul>
							</li>
							<!-- END CHARTS DROPDOWN -->
							
							<!-- Navigation category -->
							<li>
								<h4>Support</h4> 								
							</li>
							<!-- END Navigation category -->

							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#e-pages">
									<i class="fa fa-shopping-cart"></i> eCommerce <span class="fa arrow"></span>
								</a>
								<ul class="collapse nav" id="e-pages">
									<li>
										<a href="products.html">
											<i class="fa fa-angle-double-right"></i> Products Listing
										</a>
									</li>
								</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
							
							<!-- BEGIN PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#pages">
									<i class="fa fa-list"></i> Additional Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="pages">
										<li>
											<a href="profile.html">
												<i class="fa fa-angle-double-right"></i> User Profile 
											</a>
										</li>
										<li>
											<a href="inbox.html">
												<i class="fa fa-angle-double-right"></i> Inbox 
											</a>
										</li>
										<li>
											<a href="pricing.html">
												<i class="fa fa-angle-double-right"></i> Pricing Tables
											</a>
										</li>
										<li>
											<a href="invoice.html">
												<i class="fa fa-angle-double-right"></i> Invoice
											</a>
										</li>
										<li>
											<a href="timeline.html">
												<i class="fa fa-angle-double-right"></i> Timeline
											</a>
										</li>
										<li>
											<a href="login.html">
												<i class="fa fa-angle-double-right"></i> Login & Register 
											</a>
										</li>
										<li>
											<a href="faqs.html">
												<i class="fa fa-angle-double-right"></i> FAQs
											</a>
										</li>
										<li>
											<a href="blank.html">
												<i class="fa fa-angle-double-right"></i> Blank Page
											</a>
										</li>
									</ul>
							</li>
							<!-- END PAGES DROPDOWN -->
							<!-- BEGIN MORE PAGES DROPDOWN -->
							<li class="panel">
								<a href="javascript:;" data-parent="#side" data-toggle="collapse" class="accordion-toggle" data-target="#m-pages">
									<i class="fa fa-tag"></i> More Pages <span class="fa arrow"></span>
								</a>
									<ul class="collapse nav" id="m-pages">
										<li>
											<a href="gallery.html">
												<i class="fa fa-angle-double-right"></i> Gallery
											</a>
										</li>
										<li>
											<a href="error-404.html">
												<i class="fa fa-angle-double-right"></i> Error 404
											</a>
										</li>
										<li>
											<a href="error-500.html">
												<i class="fa fa-angle-double-right"></i> Error 505
											</a>
										</li>
									</ul>
							</li>
							<!-- END MORE PAGES DROPDOWN -->
						</ul><!-- /.side-nav -->

						<div class="sidebar-labels">
							<h4>Labels</h4>							
							<ul>
								<li><a href="#"><i class="fa fa-circle-o text-primary"></i> My Recent <span class="badge badge-primary">3</span></a></li>
								<li><a href="#"><i class="fa fa-circle-o text-success"></i> Background</a></li>
							</ul>
						</div>
						
						<div class="sidebar-alerts">							
							<div class="alert fade in">
								<span>Sales Report</span>
								<div class="progress progress-mini progress-striped active no-margin-bottom">
									<div class="progress-bar progress-bar-primary" style="width: 36%"></div>
								</div>
								<small>Calculating daily bias... 36%</small>
							</div>
						</div>
						
					</div><!-- /.navbar-collapse -->
				</nav><!-- /.navbar-side -->
				<!-- END SIDE NAVIGATION -->
				

				<!-- BEGIN MAIN PAGE CONTENT -->
				<div id="page-wrapper">
					<!-- BEGIN PAGE HEADING ROW -->
						<div class="row">
							<div class="col-lg-12">
								<!-- BEGIN BREADCRUMB -->
								<div class="breadcrumbs">
									<ul class="breadcrumb">
										<li>
											<a href="#">Home</a>
										</li>
										<li><a href="#">Components</a></li>
										<li class="active">Portlets</li>
									</ul>
									
									<div class="b-right hidden-xs">
										<ul>
											<li><a href="#" title=""><i class="fa fa-signal"></i></a></li>
											<li><a href="#" title=""><i class="fa fa-comments"></i></a></li>
											<li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="fa fa-plus"></i><span> Tasks</span></a>
												<ul class="dropdown-menu dropdown-primary dropdown-menu-right">
													<li><a href="#">Add new task</a></li>
													<li><a href="#">Statement</a></li>
													<li><a href="#">Settings</a></li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
								<!-- END BREADCRUMB -->
								
								<div class="page-header title">
								<!-- PAGE TITLE ROW -->
									<h1>Portlets <span class="sub-title">some nice portlets for your next app</span></h1>								
								</div>
								
								<!-- /#ek-layout-button -->	
								<div class="qs-layout-menu">
									<div class="btn btn-gray qs-setting-btn" id="qs-setting-btn">
										<i class="fa fa-cog bigger-150 icon-only"></i>
									</div>
									<div class="qs-setting-box" id="qs-setting-box">
									
										<div class="hidden-xs hidden-sm">
											<span class="bigger-120">Layout Options</span>
											
											<div class="hr hr-dotted hr-8"></div>
											<label>
												<input type="checkbox" class="tc" id="fixed-navbar" />
													<span id="#fixed-navbar" class="labels"> Fixed NavBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="fixed-sidebar" />
													<span id="#fixed-sidebar" class="labels"> Fixed NavBar+SideBar</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="sidebar-toggle" />
													<span id="#sidebar-toggle" class="labels"> Sidebar Toggle</span>
											</label>
											<label>
												<input type="checkbox" class="tc" id="in-container" />
													<span id="#in-container" class="labels"> Inside<strong>.container</strong></span>
											</label>
										
											<div class="space-4"></div>
										</div>
										
										<span class="bigger-120">Color Options</span>
										
										<div class="hr hr-dotted hr-8"></div>
										
										<label>
											<input type="checkbox" class="tc" id="side-bar-color" />
											<span id="#side-bar-color" class="labels"> SideBar (Light)</span>
										</label>
										
										<ul>									
											<li><button class="btn" style="background-color:#d15050;" onclick="swapStyle('assets/css/themes/style.css')"></button></li>
											<li><button class="btn" style="background-color:#86618f;" onclick="swapStyle('assets/css/themes/style-1.css')"></button></li> 
											<li><button class="btn" style="background-color:#ba5d32;" onclick="swapStyle('assets/css/themes/style-2.css')"></button></li>
											<li><button class="btn" style="background-color:#488075;" onclick="swapStyle('assets/css/themes/style-3.css')"></button></li>
											<li><button class="btn" style="background-color:#4e72c2;" onclick="swapStyle('assets/css/themes/style-4.css')"></button></li>
										</ul>
										
									</div>
								</div>
								<!-- /#ek-layout-button -->				
								
							</div><!-- /.col-lg-12 -->
						</div><!-- /.row -->
					<!-- END PAGE HEADING ROW -->					
						<div class="row">
							<div class="col-lg-12">
							
								<!-- START YOUR CONTENT HERE -->			
								<div class="row">					
									<div class="col-lg-6">
										<div class="portlet portlet-basic"><!-- /Basic Portlet -->
											<div class="portlet-heading">
												<div class="portlet-title">
													<h4>Basic Portlet</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#basic"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times text-danger"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="basic" class="panel-collapse collapse in">
												<div class="portlet-body">
													<div class="note">
														Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur.
													</div>
													<div class="notice marker-on-bottom">
														Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur.
													</div>														
												</div>
											</div>
										</div><!-- /Basic Portlet -->
									</div>
									<div class="col-lg-6">
										<div class="portlet"><!-- /primary heading -->
											<div class="portlet-heading bg-primary">
												<div class="portlet-title">
													<h4>Primary Heading</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#color-red"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="color-red" class="panel-collapse collapse in">
												<div class="portlet-body">
													<div class="note">
														<h5>Portlet classes</h5>Can be used portlet-primary, portlet-success, portlet-info, portlet-danger, portlet-warning and portlet-basic and no-border 
													</div>														
												</div>
											</div>
										</div><!-- /primary heading -->
										
										<div class="portlet"><!-- /inverse/dark Heading and collapsed -->
											<div class="portlet-heading bg-success">
												<div class="portlet-title">
													<h5>Collapsed Success Portlet</h5>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#green-collapsed"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="green-collapsed" class="panel-collapse collapse">
												<div class="portlet-body">
													<div class="note">
														Can use colors : portlet-primary, portlet-success, portlet-info, portlet-danger, portlet-warning and portlet-basic 
													</div>														
												</div>
											</div>
										</div><!-- /inverse/dark Heading and collapsed -->
									</div>									
								</div>
								
								<div class="row">					
									<div class="col-lg-12">
										<div class="portlet hidden-widgets"><!-- /with danger heading with hidden widgets -->
											<div class="portlet-heading inverse">
												<div class="portlet-title">
													<h4>Portlet hidden-widgets</h4>
												</div>
												<div class="portlet-widgets">
													<a data-toggle="collapse" data-parent="#accordion" href="#dark-heading"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="dark-heading" class="panel-collapse collapse in">
												<div class="portlet-body">
													<p>With addtional class<code>portlet hidden-widgets</code> portlet widgets icons show only hover</p>
												</div>
											</div>
										</div><!-- /with danger heading with hidden widgets -->
									</div>
								</div>
								
								<div class="row">					
									<div class="col-lg-6">
										<div class="portlet"><!-- /with badge -->
											<div class="portlet-heading">
												<div class="portlet-title">
													<h4><i class="fa fa-warning text-success"></i> with badge</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<span class="badge badge-warning">25</span>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#notes-warn"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="notes-warn" class="panel-collapse collapse in">
												<div class="portlet-body">
													<div class="note">
														Hello, I am note
													</div>														
												</div>
											</div>
										</div><!-- /with badge -->
									</div>
									<div class="col-lg-6">
										<div class="portlet"><!-- /with Tabs -->
											<div class="portlet-heading bg-info">
												<div class="portlet-title">
													<h4>Portlet with Tabs</h4>
												</div>
												<ul class="nav nav-tabs">
													<li class="active"><a href="#tab1" data-toggle="tab">Tabs1</a></li>
													<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
												</ul>
												<div class="clearfix"></div>
											</div>
											<div class="portlet-body">
												<div id="myTabContent" class="tab-content">													
													<div class="tab-pane fade in active" id="tab1">
														<span class="bigger-130">Tabs1</span><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tempus libero. Aliquam et dui at augue aliquet gravida at at est. Curabitur mattis sem sed dolor sagittis blandit. Curabitur mattis sem sed dolor sagittis blandit
													</div>
													<div class="tab-pane fade" id="tab2">
														<span class="bigger-130">Tabs2</span><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tempus libero. Aliquam et dui at augue aliquet gravida at at est. Curabitur mattis sem sed dolor sagittis blandit. Curabitur mattis sem sed dolor sagittis blandit
													</div>
												</div>                                    													
											</div>
										</div><!-- /with Tabs -->
									</div>
								</div>
								
								<div class="row">					
									<div class="col-lg-6">
										<div class="portlet"><!-- /with Footer -->
											<div class="portlet-heading">
												<div class="portlet-title">
													<h4>No style with Footer</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#with-footer"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times text-red"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="with-footer" class="panel-collapse collapse in">
												<div class="portlet-body">
													<div class="note green">
														Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur.
													</div>														
												</div>
												<div class="portlet-footer">
													<div class="pull-left">
														<a href="#" class="btn btn-primary"><i class="fa fa-times icon-on-left"></i> button</a>
													</div>
													<div class="pull-right">
														<a href="#" class="btn btn-inverse">button <i class="fa fa-arrow-right icon-on-right"></i></a>
													</div>
													<div class="clearfix"></div>
												</div>
											</div>
										</div><!-- /with Footer -->
									</div>
									<div class="col-lg-6">
										<div class="portlet no-border"><!-- /No border -->
											<div class="portlet-heading">
												<div class="portlet-title">
													<h4>No border</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#no-border"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times text-red"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="no-border" class="panel-collapse collapse in">
												<div class="portlet-body">
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. 
												</div>
											</div>
										</div><!-- /No border -->
										
										<div class="portlet portlet-warning"><!-- /full colored -->
											<div class="portlet-heading no-left-border">
												<div class="portlet-title">
													<h4>Color Portlet Body</h4>
												</div>
												<div class="portlet-widgets">
													<a href="#"><i class="fa fa-gear"></i></a>
													<span class="divider"></span>
													<a href="javascript:;"><i class="fa fa-refresh"></i></a>
													<span class="divider"></span>
													<a data-toggle="collapse" data-parent="#accordion" href="#fill-color"><i class="fa fa-chevron-down"></i></a>
													<span class="divider"></span>
													<a href="#" class="box-close"><i class="fa fa-times"></i></a>
												</div>
												<div class="clearfix"></div>
											</div>
											<div id="fill-color" class="panel-collapse collapse in">
												<div class="portlet-body bg-warning">
													Lorem ipsum dolor sit amet, consectetur adipiscing elit.
												</div>
											</div>
										</div><!-- /full colored -->
									</div>									
								</div>
								<!-- END YOUR CONTENT HERE -->
					
							</div>
						</div>					
					
					<!-- BEGIN FOOTER CONTENT -->		
						<div class="footer">
							<div class="footer-inner">
								<!-- basics/footer -->
								<div class="footer-content">
									&copy; 2014 <a href="#">eKoders</a>, All Rights Reserved.
								</div>
								<!-- /basics/footer -->
							</div>
						</div>
						<button type="button" id="back-to-top" class="btn btn-primary btn-sm back-to-top">
							<i class="fa fa-angle-double-up icon-only bigger-110"></i>
						</button>
					<!-- END FOOTER CONTENT -->
						
				</div><!-- /#page-wrapper -->	  
			<!-- END MAIN PAGE CONTENT -->
		</div>  
	</div> 
	 
    <!-- core JavaScript -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/plugins/pace/pace.min.js"></script>
	
	<!-- PAGE LEVEL PLUGINS JS -->

    <!-- Themes Core Scripts -->	
	<script src="assets/js/main.js"></script>

	<!-- REQUIRE FOR SPEECH COMMANDS -->
	<script src="assets/js/speech-commands.js"></script>
	<script src="assets/js/plugins/gritter/jquery.gritter.min.js"></script>
	
	<!-- initial page level scripts for examples -->
	<script src="assets/js/plugins/slimscroll/jquery.slimscroll.init.js"></script>	
	<script>
		$(function () {
			$('#myTab a:first').tab('show')
		})
	</script>
	
  </body>
</html>